import React from 'react'
// 组件可以选择把它的 state 作为 props 向下传递到它的子组件中
// FormattedDate 组件会在其 props 中接收参数 date，但是组件本身无法知道它是来自于 Clock 的 state，或是 Clock 的 props，还是手动输入的：
function FormattedDate (props){
    return <div>it is {props.date.toLocaleTimeString()}</div>
}
class Clock extends React.Component {
  constructor (props) {
    super(props)
    console.log(props)
    console.log(this, 'this')
    this.state = {
      date: new Date()
    }
  }
  //   挂载组件，做个定时器更新clock
  componentDidMount () {
    this.timeId = setInterval(() => this.tick(), 1000)
  }
  //   销毁组件，清除定时器
  componentWillUnmount () {
    this.timeId && clearInterval(this.timeId)
  }
  tick = () => {
    this.setState({
      date: new Date()
    })
  }
  render () {
    return (
      <div>
        <div>Hello word!</div>
        <FormattedDate date = {this.state.date}></FormattedDate>
      </div>
    )
  }
}
export { Clock }
